<template>
  <div class="event_details">
    <!-- 山体状态 -->
    <div class="event_mountain">
      <div class="mountain_fl">
        <div class="mountain_fl_item">
          <img src="~assets/img/title@2x.png" alt />
          <span>{{mountain}}</span>
        </div>
        <div class="mountain_fl_item">
          <span>事件编号: {{eventDetail.inspection_sn}}</span>
        </div>
        <div class="mountain_fl_item">
          <span>
            事件状态: 
            <i style="color: #FB8F24">{{eventDetail.speed_id == 4? '已处理' : '未处理'}}</i>
          </span>
        </div>
      </div>
      <div class="mountain_fr">
        <img class="mountain_type_img" v-if="eventDetail.speed_id !== 4" src="~assets/img/daichuli@2x.png" alt />
        <img class="mountain_type_img" v-else src="~assets/img/caiyong@2x.png" alt />
      </div>
    </div>
    <!-- 详情列表 -->
    <ul class="detail_list">
      <li class="detail_item">
        <span>联系方式</span>
        <div>
          <span>{{eventDetail.nickname}}</span>
          <span>{{eventDetail.mobile}}</span>
        </div>
      </li>

      <li class="detail_item">
        <span>上报时间</span>
        <div>
          <span>{{eventDetail.create_time}}</span>
          <span></span>
          <span></span>
        </div>
      </li>

      <li class="detail_item">
        <span>上报详情</span>
        <div>
          <span>{{eventDetail.inspection_des}}</span>
        </div>
      </li>
    </ul>

    <picture-display>
      <h2 slot="text">上报图片</h2>
      <img v-for="item in imgLists" :key="item.index" slot="imgs" :src="item" alt />
    </picture-display>

    <ul class="foo_list">
      <li class="foo_item">
        <span>反馈详情</span>
        <span style="color: #999">隐患整改情况</span>
        <span>{{eventDetail.speed_id == 4? '已整改' : '未整改'}}</span>
      </li>
      <li class="foo_item" v-show="eventDetail.speed_id == 4">
        <span style="color: #999">整改完成描述</span>
        <span>{{eventDetail.task_des}}</span>
      </li>
      <li class="foo_item" v-show="eventDetail.speed_id == 4">
        <span style="color: #999">整改完成时间</span>
        <span>{{eventDetail.task_time}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getInspectionDetail } from "api/eventDetails";
export default {
  name: "EventDetails",
  data() {
    return { 
      // 山体详情
      eventDetail: "",
      // 图片
      imgLists:'',
      mountain:''
    };
  },
  mounted() {
    console.log(this.$route.query.id);
    getInspectionDetail(this.$route.query.id).then((res) => { 
      console.log(res);
      this.eventDetail = res.data
      this.imgLists = res.data.inspection_img.split('|')
      this.mountain = res.data.mountain.mountain_name  
    });
  },
};
</script>

<style lang="less" scoped>
.event_details {
  height: 100%;
  font-size: 15px;
  background: #f7f9fb;
}
.event_mountain {
  padding: 22px;
  display: flex;
  font-size: 15px;
  height: 116px;
  background: #fff;
  .mountain_fl {
    flex: 1;
    display: flex;
    flex-direction: column;
    .mountain_fl_item {
      flex: 1;
      img {
        margin-right: 14px;
        width: 27px;
        vertical-align: middle;
      }
    }
    & :first-child {
      margin-bottom: 15px;
    }
  }
  .mountain_fr {
    width: 120px;
    .mountain_type_img {
      width: 88px;
    }
  }
}
.detail_list {
  margin-top: 10px;
  background: #fff;
  .detail_item {
    padding: 18px;
    border-bottom: 1px solid #ebebeb;
    span {
      color: #999;
    }
    div {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      & span:first-child {
        color: #333;
      }
      & span:last-child {
        color: #2aabad;
      }
    }
  }
  & .detail_item:nth-child(2) {
    div {
      & span:last-child {
        color: #333;
      }
    }
  }
  & .detail_item:nth-child(3) {
    div {
      span {
        color: #333;
      }
    }
  }
}
.foo_list {
  margin-top: 10px;
  background: #fff;
  .foo_item {
    padding: 18px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ebebeb;
    span {
      margin-top: 10px;
    }
  }
}
</style>